<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"      
      xmlns:trh="http://myfaces.apache.org/trinidad/html"
      xmlns:tr="http://myfaces.apache.org/trinidad"
      xmlns:v="urn:schemas-microsoft-com:vml">  
  <body>          
   <ui:composition template="/WEB-INF/layout/newfoon-template.xhtml">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <ui:param name="LoadScriptName" value="initialize();"/>
      <ui:param name="unLoadScriptName" value="GUnload();"/>
      <ui:param name="PageTitle"
                value="#{requestContext.timeZone}"/>       
      <ui:define name="FoonScript">
        <style type="text/css">
            @import url("http://www.google.com/uds/css/gsearch.css");
            @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
            }
            </style>                                                                                                                                                     
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA6PkGijZQl8bQ0xwCakOhKRR0YRgEKxXI_NI8j6AHwyViqFODNhQ0aCCFeLTTnT9vtTecMED8EQbQLQ"
                type="text/javascript"></script>
        <script type="text/javascript"
                src="${facesContext.externalContext.request.contextPath}/sc/foonUtils.js"></script>
        <script type="text/javascript"
                src="${facesContext.externalContext.request.contextPath}/sc/markermanager.js"></script>
        <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0"
                type="text/javascript"></script>
        <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
                type="text/javascript"></script>
        <script type="text/javascript">        
    
    var map;
    var mgr;
    var icons = {};
    var allmarkers = [];

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"),{size:new GSize(575,400)});          
        map.setCenter(new GLatLng(41.006961, 29.046580), 12);        
        
        map.enableDoubleClickZoom(); 
	map.enableContinuousZoom();
	map.enableScrollWheelZoom();                    

	map.addControl(new GScaleControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        
        mgr = new MarkerManager(map, {trackMarkers:true});                
        /*
        var mapControl = new GMapTypeControl();
        map.addControl(mapControl);
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
        
        
        var point = new GLatLng(41.006961459512326, 29.04658019542694);
        map.addOverlay(new GMarker(point));
        */            
        
        GEvent.addListener(map, 'click', function(overlay, latlng) {
          alert(latlng.lat() + '-' + latlng.lng());          
        });                
        
        GEvent.addListener(map, 'moveend', function() {
          window.document.getElementById("sllInputHidden").value = map.getCenter();          
        });                       
      }            
      
      GSearch.setOnLoadCallback(initialize);    
    }    
    
    function createMarker(lat, lng) {  
      var latlng = new GLatLng(lat, lng);
      mgr.clearMarkers();      
      marker = new GMarker(latlng,{draggable:true, autoPan:false});      
      mgr.addMarker(marker, 0, 17);
      map.setCenter(latlng, 15);      
      mgr.refresh();
    }                     
    
    function cme(index, name, latitude, longitude, streetaddress, region, city, country) {                      
      var si = window.document.getElementById('locSearchInput');
      si.value = name;
          
      createMarker(latitude, longitude);      
    }              

    </script>
      </ui:define>
      <ui:define name="globalContent">
        <div id="EventPanel">
          <div id="EventPanelHeader">
            <div id="EventPanelHeaderTopLeft"/>             
                <tr:outputText value="#{messages['global.whatareyoudoing']}" styleClass="PanelHeaderText"/>                       
            <div id="EventPanelHeaderTopRight"/>
          </div>
           
          <div id="EventContent">               
            <tr:panelFormLayout>      
                <tr:panelLabelAndMessage for="MFEventMonth" label="#{messages['global.date']}" labelStyle="color: Black; font-size: 12px; font-family: Tahoma; font-weight: bold;">
                <tr:panelHorizontalLayout>
                    <f:facet name="separator">
                        <tr:outputText value = "" inlineStyle="padding-right: 6px; paddin-left: 6px;"/>
                    </f:facet>
                    <tr:selectOneChoice simple="true" id="MFEventMonth" styleClass="formSelectOneChoice" onchange="MFEvent_showHideDateDetails();" value="#{HomeBean.selectedMonth}">
                        <f:selectItem itemLabel="#{messages['global.now']}" itemValue="0"/>
                        <f:selectItems value="#{HomeBean.monthList}"/>                        
                    </tr:selectOneChoice>
                    <tr:selectOneChoice id="MFEventDay" styleClass="formSelectOneChoice" simple="true" inlineStyle="visibility: hidden" value="#{HomeBean.selectedDay}">                        
                        <f:selectItems value="#{HomeBean.dayList}"/>
                    </tr:selectOneChoice>
                    <tr:outputText value = "" inlineStyle="padding-right: 6px; paddin-left: 6px;"/>
                    <tr:selectOneChoice id="MFEventHour" styleClass="formSelectOneChoice" simple="true" inlineStyle="visibility: hidden" value="#{HomeBean.selectedHour}">                        
                        <f:selectItems value="#{HomeBean.hourList}"/>
                    </tr:selectOneChoice>
                    <tr:outputText id="MFEventColon" value=":" inlineStyle="font-size: 12px; visibility: hidden;"/>
                    <tr:selectOneChoice id="MFEventMinute" styleClass="formSelectOneChoice" simple="true" inlineStyle="visibility: hidden" value="#{HomeBean.selectedMinute}">                        
                        <f:selectItems value="#{HomeBean.minuteList}"/>                        
                    </tr:selectOneChoice>                    
                </tr:panelHorizontalLayout>
                </tr:panelLabelAndMessage>                
              <tr:spacer height="5px;"/>               
              
              <tr:panelHorizontalLayout valign="top">
                <f:facet name="separator">
                    <tr:spacer width="5px"/>
                </f:facet>
              <tr:panelGroupLayout layout="vertical">
                <f:facet name="separator">
                    <tr:spacer height="3px"/>
                </f:facet>
                <tr:inputText id="MFMessageBox" rows="2" 
                              wrap="hard" 
                              onkeypress="changeLength()" 
                              onkeyup="changeLength()" 
                              styleClass="FoonMessageBox" 
                              simple="true" maximumLength="150"/>
                <tr:panelHorizontalLayout halign="right">                
                    <tr:commandButton text="#{messages['global.post']}" styleClass="FoonButton"
                                  inlineStyle="font-weight: bold; font-size: 14px; padding-left:15px; padding-right:15px; padding-top: 3px; padding-bottom: 3px;"/>
                </tr:panelHorizontalLayout>                            
              </tr:panelGroupLayout>
              <tr:outputText id="MFMessageLength" value="150" inlineStyle="font-size: 26px; font-family: Tahoma; font-weight: bold; color: #B8D8F8;"/>
              </tr:panelHorizontalLayout>                        
            </tr:panelFormLayout>            
                
            <div id="navi1" class="selectedNaviBox">
              <a href="#">                 
                <div class="top">
                  <div></div>
                </div>
                 
                <div class="content"><tr:goLink text="#{messages['global.addphotos']}" destination="#"
                         styleClass="FoonGoLink"
                         inlineStyle="font-size: 11px; color: black;"
                         onclick="show('1'); return false;"></tr:goLink></div>
                 
                <div class="bottom">
                  <div></div>
                </div>
                <div class="arrow">
                </div>
                 </a>
            </div>
             
            <div id="navi2" class="naviBox">
              <a href="#">
                 
                <div class="top">
                  <div></div>
                </div>
                 
                <div class="content"><tr:goLink text="#{messages['global.addlocation']}" destination="#"
                         styleClass="FoonGoLink"
                         inlineStyle="font-size: 11px; color: black;"
                         onclick="show('2'); return false;"></tr:goLink></div>
                 
                <div class="bottom">
                  <div></div>
                </div>
                <div class="arrow">
                </div>
                 </a>
            </div>            
            
            <div id="navi3" class="naviBox">
              <a href="#">
                 
                <div class="top">
                  <div></div>
                </div>
                 
                <div class="content"><tr:goLink text="#{messages['global.addvideos']}" destination="#"
                         styleClass="FoonGoLink"
                         inlineStyle="font-size: 11px; color: black;"
                         onclick="show('3'); return false;"></tr:goLink></div>
                 
                <div class="bottom">
                  <div></div>
                </div>
                <div class="arrow">
                </div>
                 </a>
            </div>                         
             
            <div id="TabContent1" style="display: block;">
              <tr:inputFile label="Upload:" value="#{HomeBean.uploadedPhoto}">
                <tr:inputText styleClass="FoonInput"/>
              </tr:inputFile>
               
              <tr:commandButton text="Submit" action="#{HomeBean.doPhotoUpload}"
                                id="uploadPhotoButton" partialSubmit="true"/>
               
              <tr:statusIndicator>
                <f:facet name="busy"></f:facet>
              </tr:statusIndicator>
               
              <tr:table id="uploadedPhotosTable"
                        value="#{HomeBean.uploadedPhotos}"
                        verticalGridVisible="false"
                        horizontalGridVisible="false" var="uploadedPhoto"
                        partialTriggers="::uploadPhotoButton">
                <tr:column>
                  <tr:outputText value="File uploaded successfully."/>
                </tr:column>
                <tr:column>
                  <tr:image source="#{uploadedPhoto.webFolder}"/>
                </tr:column>
              </tr:table>
            </div>
             
            <div id="TabContent2" style="display: none;">
              <tr:panelFormLayout>                
                <tr:inputText label="#{messages['global.whereareyou']}"
                              value="#{HomeBean.searchInput}"
                              id="locSearchInput" styleClass="FoonInput"                              
                              onkeyup="keyEvent(event); return false;"
                              autoComplete="off"/>
               <div style="width: 300px;" class="autosuggest"
                       onkeypress="alert(1);" id="searchResultsArea"></div>
              </tr:panelFormLayout>
               
              <tr:spacer height="10"/>
               
              <div id="map_canvas" class="map_canvas_style"></div>
            </div>
             
            <div id="TabContent3" style="display: none;">
              <tr:panelFormLayout>
                <tr:panelLabelAndMessage label="You will be able to attach videos to your message.."
                                         labelStyle="color: #146eb4; font-size: 12px; font-family: Tahoma; font-weight: bold;"></tr:panelLabelAndMessage>
              </tr:panelFormLayout>
            </div>
          </div>
        </div>
        <tr:spacer height="400"/>
        <tr:inputText id="searchResultsHtml" value="#{HomeBean.divHtml}"
                      partialTriggers="findLocationsButton"
                      inlineStyle="display: none;"
                      onchange="showLocationSearchResults(); return false;"/>
        <tr:commandButton id="findLocationsButton"
                          inlineStyle="visibility: hidden;"
                          actionListener="#{HomeBean.findSearchResultsListener}"
                          partialSubmit="true"/>
        <tr:inputHidden id="sllInputHidden" value="#{HomeBean.sllValue}"/>
      </ui:define>
    </ui:composition>
  </body>
</html>

